<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="msg.css">
</head>

<body>
    <div class="con">
        <div id="left">
            <section class="container">
                <div class="box-user">
                    <div class="top-box">
                        <ul id="left-s">
                            <!-- <li></li>
                            <li></li> -->
                        </ul>
                    </div>
                    <div class="bottom">
                        <!--  输入的信息 -->
                        <input type="text" name="msg" id="left-msg">
                        <!--  发送按钮 -->
                        <input type="button" class="btn-send" value="发送" id="left-send">
                    </div>
                </div>
            </section>
        </div>
        <div id="right">
            <section class="container">
                <div class="box-user">
                    <div class="top-box">
                        <ul id="right-s">
                            <!-- <li></li>
                            <li></li> -->
                        </ul>
                    </div>
                    <div class="bottom">
                        <!--  输入的信息 -->
                        <input type="text" name="msg" id="right-msg">
                        <!--  发送按钮 -->
                        <input type="button" class="btn-send" value="发送" id="right-send">
                    </div>
                </div>
            </section>
        </div>
    </div>
</body>

</html>
<script>
    // 获取dom
    let leftsend = document.querySelector('#left-send')
    let rightsend = document.querySelector('#right-send')
    let leftul = document.querySelector('#left-s')
    let rightul = document.querySelector('#right-s')
    //给左边的按钮一个点击事件
    leftsend.onclick = function () {
        let leftmsg = document.querySelector('#left-msg')
        //判断没有输入值的时候不能发送空的消息
        if (leftmsg.value === '') {
            return
        } else {

            //创建一个li
            let leftli = document.createElement('li')
            //把输入的文本给到给到leftli的显示内容
            leftli.innerHTML = leftmsg.value
            //把li插到ul里面去        
            leftul.appendChild(leftli)
            //清空输入的值  
            leftmsg.value = ''
            //一个右边显示的li
            let rightli = document.createElement('li')
            //把左边li获取到的内容赋予给右边li让右边也显示同样的内容
            rightli.innerHTML = leftli.innerHTML
            
            rightli.style.alignSelf = 'flex-start'
            //把li插入到ul
            rightul.appendChild(rightli)
        }
    }

    //给的键盘敲击事件
    document.onkeydown = function (e) {
        e = e || window.event
        // document.write(e.keyCode)  
        let leftmsg = document.querySelector('#left-msg')
        if (e.keyCode == 13) {

            //判断没有输入值的时候不能发送空的消息
            if (leftmsg.value === '') {
                return
            } else {

                //创建一个li
                let leftli = document.createElement('li')
                //把输入的文本给到给到leftli的显示内容
                leftli.innerHTML = leftmsg.value
                //把li插到ul里面去        
                leftul.appendChild(leftli)
                //清空输入的值  
                leftmsg.value = ''
                //一个右边显示的li
                let rightli = document.createElement('li')
                //把左边li获取到的内容赋予给右边li让右边也显示同样的内容
                rightli.innerHTML = leftli.innerHTML

                rightli.style.alignSelf = 'flex-start'
                //把li插入到ul
                rightul.appendChild(rightli)
            }
        }
    }





    //给右边的按钮一个点击事件
    rightsend.onclick = function () {
        let rightmsg = document.querySelector('#right-msg')
        //判断没有输入值的时候不能发送空的消息
        if (rightmsg.value == '') {
            return
        } else {
            //创建一个li
            let rightli = document.createElement('li')
            //把输入的文本给到给到rightli的显示内容
            rightli.innerHTML = rightmsg.value
            //把li插到ul里面去        
            rightul.appendChild(rightli)
            //清空输入的值  
            rightmsg.value = ''
            //  再创建个左边的li
            let leftli = document.createElement('li')
            //把左边li获取到的内容赋予给右边li让右边也显示同样的内容    
            leftli.innerHTML = rightli.innerHTML
            leftli.style.alignSelf = 'flex-start'
            //把li插入到ul
            leftul.appendChild(leftli)
        }
    }


    //给的键盘敲击事件
    document.onkeypress = function (e) {
        e = e || window.event
        let rightmsg = document.querySelector('#right-msg')
        if (e.keyCode == 13) {
            //判断没有输入值的时候不能发送空的消息
            if (rightmsg.value == '') {
                return
            } else {
                //创建一个li
                let rightli = document.createElement('li')
                //把输入的文本给到给到rightli的显示内容
                rightli.innerHTML = rightmsg.value
                //把li插到ul里面去        
                rightul.appendChild(rightli)
                //清空输入的值  
                rightmsg.value = ''
                //  再创建个左边的li
                let leftli = document.createElement('li')
                //把左边li获取到的内容赋予给右边li让右边也显示同样的内容    
                leftli.innerHTML = rightli.innerHTML
                leftli.style.alignSelf = 'flex-start'
                //把li插入到ul
                leftul.appendChild(leftli)
            }
        }
    }
</script>